<template>
  <div class="collectWebSource">
    <breadcrumbNavigation
      v-if="props.title"
      :title="props.title"
      :showRightIcon="false"
    ></breadcrumbNavigation>
    <div class="collectType">
      <div class="collectItem" v-for="item in data.option">
        <div class="collectItemLeft">
          <i class="iconfont" :class="item.icon" :style="{ color: item.color }"></i>
          <span class="type" v-text="item.source"></span>
        </div>
        <div>
            <CountTo
          class="count"
          :start="0"
          :end="item.value"
          prefix=""
          suffix=""
          :autoPlay="true"
          :duration="3000"
        />
        <van-icon name="arrow" />
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import breadcrumbNavigation from "@/components/breadcrumbNavigation/index.vue";
import CountTo from "@/components/countTo/index.vue";

const props = defineProps({
  title: {
    type: String,
    default: "数据总览",
  },
  start: {
    type: Number,
    default: 0,
  },
  end: {
    type: Number,
    default: 0,
  },
});

const data = reactive({
    option: [
        {icon: 'icon-weixin', color: '#28c445' ,source: 'mp.wei.xin.qq.com', value: 140 },
        {icon: 'icon-shejiaotubiao-46', color: '#49c0fb' ,source: 'zhuanlan.zhihu.com', value: 140 },
        {icon: 'icon-weixin', color: '#f56467' ,source: 'mp.wei.xin.qq.com', value: 140 },
        {icon: 'icon-qq', color: '#4cafe9' ,source: 'mp.wei.xin.qq.com', value: 140 },
        {icon: 'icon-weixin', color: '' ,source: 'mp.wei.xin.qq.com', value: 140 },
    ]
})
</script>

<style lang="less" scoped>
.collectWebSource {
  .collectType {
    padding: 5%;
    border-radius: 14px;
    background-color: #fff;
    position: relative;
    top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .collectItem {
      width: 100%;
      height: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .collectItemLeft {
        .type {
          position: relative;
          left: 6px;
        }
      }
    }
  }
}
</style>
